<template>
    <div class="main">
        <el-menu class="left-menu" :default-active="menuActive" active-text-color="" @click="handleClick(index)">
            <el-menu-item class="left-menu-item" index="1">
                <i class="el-icon-circle-plus-outline"></i>
                <span class="item-title">全部关注</span>
            </el-menu-item>
            <el-menu-item class="left-menu-item" index="2">
                <i class="el-icon-circle-check"></i>
                <span class="item-title">特别关注</span>
            </el-menu-item>
        </el-menu>

        <div>
            <div class="list" v-show="listYes">
                <fans-item v-for="(item, index) in fansList" :key="index" :fans="item">
                </fans-item>
            </div>
            <div class="chat-list-no" v-show="!listYes">
                <img src="@/assets/img/no-data.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script>
import { getUserFollow } from "@/api/user/userFollow";

import FansItem from "@/views/user/FansItem";
import Bus from "@/utils/bus";

export default {
    name: "user-follow",
    components: {
        FansItem,
    },
    data() {
        return {
            userId: this.$route.query.userId,
            menuActive: "1",
            // 粉丝列表
            fansList: [],
            listYes: true,
        };
    },
    created() {
        this.getData();

        Bus.$emit("hasRouterChange", 3);
    },

    methods: {
        // 获取用户的聊天室
        async getData() {
            const { data: res } = await getUserFollow(this.userId);
            this.fansList = res.data;
            if (res.data.length == 0) {
                this.listYes = false;
            }
        },

        handleClick(index) {
            this.menuActive = index;
        },
    }
}
</script>

<style>
.main {
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.left-menu {
    width: 200px;
    height: 600px;
    margin: 10px 0 100px 0;
    border: 2px solid rgba(152, 152, 152, 0.2);
    overflow-y: scroll;
}

/* 隐藏滚动条 */
.left-menu::-webkit-scrollbar {
    display: none
}

.left-menu-item {
    display: flex;
    align-items: center;
    height: 70px;
}

.left-menu-item.is-active {
    background-color: #3aaaff !important;
    color: #fff;
}

.list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.chat-list-no {
    margin: 50px;
    text-align: center;
}
</style>
